<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Emrys Chen的主页</title>
        <link rel=icon href=img/favicon.ico>
        <link rel="stylesheet" type="text/css" href="css/basic.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
    </head>
    <body>
        <!-- 加载前的动画,遮罩层 -->
        <div class="loader">
            <div class="loader-box">
                <div class="loader-line"></div>
                <div class="loader-line"></div>
                <div class="loader-line"></div>
                <div class="loader-line"></div>
            </div>
        </div>
        <!-- 中英文按钮 -->
        <div class="lang">
            <div class="lang-btn"></div>
        </div>
        <!-- 主体 -->
        <section class="main">
            <!-- 1: 简介 -->
            <div class="main-page home">
                <div class="avatar">
                    <img src="img/index/page1/avatar.jpg" alt="" />
                </div>
                <!-- 简介文字 -->
                <div class="intro-3d">
                    <div class="intro-box"></div>
                    <p class="intro-name" data-lang="zh" data-zh="陈曦" data-en="Emrys"></p>
                    <p
                        class="intro-short"
                        data-lang="zh"
                        data-zh="一只前端开发攻城狮"
                        data-en="Front-end development engineer"
                    ></p>
                    <div class="light"></div>
                </div>
                <!-- 链接 -->
                <div class="icon-box">
                    <div class="icon gitee">
                        <svg viewBox="0 0 70 70" version="1.1" xmlns="http://www.w3.org/2000/svg">
                            <circle cy="35" cx="35" r="30" class="circle"></circle>
                        </svg>
                        <a href="https://gitee.com/emrys-cloud" target="_blank">
                            <svg
                                t="1591106325435"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="5573"
                                width="30"
                                height="30"
                            >
                                <path
                                    d="M512 1024C229.234 1024 0 794.766 0 512S229.234 0 512 0s512 229.234 512 512-229.234 512-512 512z m259.157-568.889l-290.759 0.014c-13.966 0-25.287 11.321-25.287 25.273l-0.028 63.218c0 13.966 11.306 25.287 25.273 25.287H657.38c13.966 0 25.287 11.307 25.287 25.273v12.644a75.847 75.847 0 0 1-75.847 75.847H366.606a25.287 25.287 0 0 1-25.287-25.273v-240.2a75.847 75.847 0 0 1 75.847-75.846l353.92-0.015c13.966 0 25.273-11.306 25.287-25.273l0.071-63.189c0-13.966-11.306-25.287-25.272-25.301l-353.992 0.014c-104.718-0.014-189.624 84.892-189.624 189.61v353.963c0 13.967 11.32 25.287 25.287 25.287h372.935c94.265 0 170.666-76.401 170.666-170.666v-145.38c0-13.952-11.32-25.273-25.287-25.273z"
                                    p-id="5574"
                                ></path>
                            </svg>
                        </a>
                    </div>
                    <div class="icon juejin">
                        <svg viewBox="0 0 70 70" version="1.1" xmlns="http://www.w3.org/2000/svg">
                            <circle cy="35" cx="35" r="30" class="circle"></circle>
                        </svg>
                        <a href="https://api.emrys.cloud/" target="_blank">
                            <svg
                                t="1599192998410"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="929"
                                width="30"
                                height="30"
                            >
                                <path
                                    d="M819.49672675-1.17468729L207.70275555-1.17468729c-112.62342485 0-203.92977181 91.30634695-203.9297718 203.93326364l0 611.80212111c0 112.62226091 91.30634695 203.92162077 203.9297718 203.92162076l611.7939712 0c112.62226091 0 203.92860672-91.29936099 203.92860672-203.92162076l0-611.80212111C1023.42649856 90.13631659 932.12015161-1.17468729 819.49672675-1.17468729zM747.05079637 815.59575666L280.14985102 815.59575666 280.14985102 201.71420445l455.17649351 0L735.32634453 305.56350123 404.09837341 305.56350123l0 136.09212018 308.19705059 0 0 103.43015082L404.09837341 545.08577223l0 167.07866852 342.95242182 0L747.05079637 815.59575666z"
                                    p-id="930"
                                ></path>
                            </svg>
                        </a>
                    </div>
                    <div class="icon git">
                        <svg viewBox="0 0 70 70" version="1.1" xmlns="http://www.w3.org/2000/svg">
                            <circle cy="35" cx="35" r="30" class="circle"></circle>
                        </svg>
                        <a href="https://github.com/emrys-chen" target="_blank">
                            <svg
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                width="30"
                                height="30"
                            >
                                <path
                                    d="M512 38.4a473.6 473.6 0 0 0-149.792 922.944 23.936 23.936 0 0 0 32.576-22.4c0-11.232-0.608-48.544-0.608-88.192-118.976 21.888-149.76-28.992-159.264-55.648a172.224 172.224 0 0 0-48.544-66.912c-16.576-8.864-40.256-30.784-0.576-31.36a94.784 94.784 0 0 1 72.832 48.544 101.216 101.216 0 0 0 137.92 39.072 99.616 99.616 0 0 1 30.176-63.328c-105.376-11.84-215.488-52.704-215.488-233.824a184.32 184.32 0 0 1 48.544-127.296 170.176 170.176 0 0 1 4.736-125.504s39.68-12.448 130.24 48.544a446.496 446.496 0 0 1 236.8 0c90.56-61.568 130.24-48.544 130.24-48.544a170.176 170.176 0 0 1 4.736 125.504 183.232 183.232 0 0 1 48.544 127.296c0 181.76-110.688 222.016-216.064 233.856a112 112 0 0 1 32 87.616c0 63.328-0.608 114.272-0.608 130.24a23.744 23.744 0 0 0 32.576 22.4A473.856 473.856 0 0 0 512 38.4z"
                                ></path>
                            </svg>
                        </a>
                    </div>
                </div>
                <div class="home-arrow">↓</div>
            </div>
            <!-- 2: 自我介绍 -->
            <div class="main-page about-me add-table">
                <h1
                    class="about-title"
                    data-lang="zh"
                    data-zh="自我介绍"
                    data-en="Self Introduction"
                ></h1>
                <p
                    class="about-subtitle"
                    data-lang="zh"
                    data-zh="热爱前端，喜欢折腾，不断进步的前端攻城狮。"
                    data-en="Keen on front end,Like practice,Keep improving."
                ></p>
                <div class="about-icon">
                    <div class="about-icon-item">
                        <div class="icon-info">
                            <p
                                class="info-title"
                                data-lang="zh"
                                data-zh="生日"
                                data-en="Birthday"
                            ></p>
                            <p class="info-msg">1997.8</p>
                        </div>
                        <iframe
                            src="img/index/page2/birth.svg"
                            width="50"
                            height="50"
                            frameborder="0"
                        ></iframe>
                        <div class="shade"></div>
                    </div>
                    <div class="about-icon-item">
                        <div class="icon-info">
                            <p
                                class="info-title"
                                data-lang="zh"
                                data-zh="毕业院校"
                                data-en="School"
                            ></p>
                            <p
                                class="info-msg"
                                data-lang="zh"
                                data-zh="深圳职业技术学院"
                                data-en="Shenzhen Polytechnic"
                            ></p>
                        </div>
                        <iframe
                            src="img/index/page2/school.svg"
                            width="50"
                            height="50"
                            frameborder="0"
                        ></iframe>
                        <div class="shade"></div>
                    </div>
                    <div class="about-icon-item">
                        <div class="icon-info">
                            <p
                                class="info-title"
                                data-lang="zh"
                                data-zh="坐标"
                                data-en="Address"
                            ></p>
                            <p
                                class="info-msg"
                                data-lang="zh"
                                data-zh="广东 · 深圳"
                                data-en="Shenzhen, Guangdong"
                            ></p>
                        </div>
                        <iframe
                            src="img/index/page2/addr.svg"
                            width="50"
                            height="50"
                            frameborder="0"
                        ></iframe>
                        <div class="shade"></div>
                    </div>
                    <div class="about-icon-item">
                        <div class="icon-info">
                            <p
                                class="info-title"
                                data-lang="zh"
                                data-zh="职业"
                                data-en="Occupation"
                            ></p>
                            <p
                                class="info-msg"
                                data-lang="zh"
                                data-zh="前端开发工程师"
                                data-en="Front-end engineer"
                            ></p>
                        </div>
                        <iframe
                            src="img/index/page2/skill.svg"
                            width="50"
                            height="50"
                            frameborder="0"
                        ></iframe>
                        <div class="shade"></div>
                    </div>
                    <div class="about-icon-item">
                        <div class="icon-info">
                            <p class="info-title" data-lang="zh" data-zh="邮箱" data-en="Email"></p>
                            <p class="info-msg">719666655@qq.com</p>
                        </div>
                        <iframe
                            src="img/index/page2/email.svg"
                            width="50"
                            height="50"
                            frameborder="0"
                        ></iframe>
                        <div class="shade"></div>
                    </div>
                    <div class="about-icon-item">
                        <div class="icon-info">
                            <p class="info-title" data-lang="zh" data-zh="手机" data-en="Phone"></p>
                            <p class="info-msg">+86 1382xxxx506</p>
                        </div>
                        <iframe
                            src="img/index/page2/phone.svg"
                            width="50"
                            height="50"
                            frameborder="0"
                        ></iframe>
                        <div class="shade"></div>
                    </div>
                    <div class="about-icon-item">
                        <div class="icon-info">
                            <p class="info-title">qq</p>
                            <p class="info-msg">719666655</p>
                        </div>
                        <iframe
                            src="img/index/page2/qq.svg"
                            width="50"
                            height="50"
                            frameborder="0"
                        ></iframe>
                        <div class="shade"></div>
                    </div>
                    <div class="about-icon-item">
                        <div class="icon-info">
                            <img src="img/index/page2/QRcode.jpg" alt="" />
                        </div>
                        <iframe
                            src="img/index/page2/wechat.svg"
                            width="50"
                            height="50"
                            frameborder="0"
                        ></iframe>
                        <div class="shade"></div>
                    </div>
                </div>
            </div>
            <!-- 3: 技能 -->
            <div class="main-page skill add-table">
                <p class="skill-title" data-lang="zh" data-zh="技能" data-en="Skill"></p>
                <div class="skill-box">
                    <div class="progress-box">
                        <div class="card html">
                            <img src="img/index/page3/html.png" alt="" />
                            <div class="card-mask">
                                <p></p>
                            </div>
                        </div>
                    </div>
                    <div class="progress-box">
                        <div class="card css">
                            <img src="img/index/page3/css.png" alt="" />
                            <div class="card-mask">
                                <p></p>
                            </div>
                        </div>
                    </div>
                    <div class="progress-box">
                        <div class="card js">
                            <img src="img/index/page3/javascript.png" alt="" />
                            <div class="card-mask">
                                <p></p>
                            </div>
                        </div>
                    </div>
                    <div class="progress-box">
                        <div class="card vue">
                            <img src="img/index/page3/vuejs.png" alt="" />
                            <div class="card-mask">
                                <p></p>
                            </div>
                        </div>
                    </div>
                    <div class="progress-box">
                        <div class="card ng">
                            <img src="img/index/page3/angular.png" alt="" />
                            <div class="card-mask">
                                <p></p>
                            </div>
                        </div>
                    </div>
                    <div class="progress-box">
                        <div class="card react">
                            <img src="img/index/page3/react.png" alt="" />
                            <div class="card-mask">
                                <p></p>
                            </div>
                        </div>
                    </div>
                    <div class="progress-box">
                        <div class="card node">
                            <img src="img/index/page3/nodejs.png" alt="" />
                            <div class="card-mask">
                                <p></p>
                            </div>
                        </div>
                    </div>
                    <div class="progress-box">
                        <div class="card php">
                            <img src="img/index/page3/php.png" alt="" />
                            <div class="card-mask">
                                <p></p>
                            </div>
                        </div>
                    </div>
                    <div class="progress-box">
                        <div class="card python">
                            <img src="img/index/page3/python.png" alt="" />
                            <div class="card-mask">
                                <p></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 4: -->
            <div class="main-page">
                <div class="icp-box">
                    <a href="http://www.beian.miit.gov.cn/" target="_blank" class="icp-box-item">
                        粤ICP备20048177号-1
                    </a>
                </div>
            </div>
        </section>
        <!-- 侧边栏 -->
        <aside class="aside">
            <div class="aside-item aside-item-on">
                <s></s>
                <p data-lang="zh" data-zh="简介" data-en="Intro"></p>
            </div>
            <div class="aside-item">
                <s></s>
                <p data-lang="zh" data-zh="自我介绍" data-en="Self"></p>
            </div>
            <div class="aside-item">
                <s></s>
                <p data-lang="zh" data-zh="技能" data-en="Skill"></p>
            </div>
            <div class="aside-item">
                <s></s>
                <p data-lang="zh" data-zh="项目" data-en="Project"></p>
            </div>
            <div class="aside-item-big"></div>
        </aside>

        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>
